<template>
  <!--自己基于vue-pdf插件自定义封装的文件浏览组件-->
  <div>
    <div class="affixTop10" style="text-align: center">
      <div class="bgblue2">
        <el-button type="primary" size="mini" @click="leftBtn()">左旋转</el-button>
        {{pageRotate >0 ?'+'+pageRotate:pageRotate +'°'}}
        <el-button type="primary" size="mini" @click="rightBtn()">右旋转</el-button>
        <el-button type="primary" size="mini" @click="changePdfPage(0)">上一页</el-button>
        {{page}} / {{pageCount}}
        <el-button type="primary" size="mini" @click="changePdfPage(1)">下一页</el-button>
        <el-button type="primary" size="mini" @click="changeBig(10)">放大</el-button>
        {{scale+'%'}}
        <el-button type="primary" size="mini" @click="changeSmall()">缩小</el-button>
        <el-input size="mini" v-model="pageCopy" style="margin-left: 10px;width: 50px"></el-input>
        <el-button type="primary" size="mini" @click="go()">跳转</el-button>
        <el-button type="success" size="mini" @click="result()">重置页面</el-button>
        <el-button type="danger" size="mini" @click="cancel">关闭</el-button>
      </div>
    </div>
    <div v-loading="lookLoading" element-loading-text="加载中"></div>
    <pdf :src="srcPdf" :rotate="pageRotate" :page="this.page"></pdf>
  </div>
</template>

<script>
import pdf from 'vue-pdf'

export default {
  name: 'browse',
  components: { pdf },
  props: {
  },
  data () {
    return {
      loading: false,
      lookLoading: false,
      loadLoading: false,
      page: 1,
      pageCopy: 1,
      pageCount: 1,
      pageNum: 1,
      srcPdf: '',
      pageRotate: 0,
      scale: 50
    }
  },
  mounted () {
  },
  methods: {
    async init (url) {
      this.lookLoading = true
      this.scale = 50
      this.pageRotate = 0
      // 有时PDF文件地址会出现跨域的情况,这里最好处理一下
      this.srcPdf = pdf.createLoadingTask(url)
      this.page = 1
      this.srcPdf.promise.then(pdf => {
        if (pdf) {
          this.pageCount = pdf.numPages
          this.lookLoading = false
        }
      }).catch(err => {
        this.$tips.error('pdf有问题，无法加载，错误代码：' + err)
        this.lookLoading = false
      })
    },
    changePdfPage (val) {
      if (val === 0 && this.page > 1) {
        this.page--
      }
      if (val === 1 && this.page < this.pageCount) {
        this.page++
      }
    },
    leftBtn () {
      if (this.pageRotate > -360) {
        this.pageRotate -= 90
      } else {
        this.$tips.error('已左旋转至最大')
      }
    },
    rightBtn () {
      if (this.pageRotate < 360) {
        this.pageRotate += 90
      } else {
        this.$tips.error('已右旋转至最大')
      }
    },
    changeBig () {
      this.scale += 10
      this.$emit('changeSize', this.scale.toString());
    },
    changeSmall () {
      if (this.scale > 10) {
        this.scale -= 10
      } else {
        this.$tips.error('已经压缩到最小')
      }
      this.$emit('changeSize', this.scale.toString());
    },
    result () {
      this.page = 1
      this.scale = 50
      this.$emit('changeSize', this.scale.toString());
      this.pageRotate = 0
    },
    go () {
      if (this.pageCopy > this.pageCount) {
        this.$tips.error('该文件最大页数为' + this.pageCount)
      } else {
        this.page = parseInt(this.pageCopy)
      }
    },
    cancel () {
      this.$emit('cancel');
    }
  },
  filters: {
  }
}
</script>
<style scoped>
.bgblue5 {
  background-color: #ecf8ff;
  padding: 10px;
  border-radius: 10px;
  font-size: 16px;
  width: 100%;
  /*height: 5rem;*/
}

.bgblue2 {
  background-color: #ecf8ff;
  padding: 10px;
  border-radius: 10px;
  font-size: 16px;
  width: 100%;
  height: 3rem;
}
</style>
